import { useState } from 'react';
import { optionsTab } from './tools'
import { Select } from '@arco-design/web-react';
import { useDispatch, useSelector } from "react-redux";
import { setValue, setNewList } from '@/store/router'
import './index.less'
const Option = Select.Option;
const options = ['USDT', 'USDC', 'ETF', 'BTC', 'ALTS'];


function SelectDropdown() {
  const dispatch = useDispatch();
  const [coin, setCoin] = useState('USDT')
  const [indexVal, setIndexVal] = useState('0')
  const list = useSelector(state => state?.router?.value);

  const onTab = (item) => {
    setIndexVal(item?.value)
    dispatch(setValue(item?.chv))
  }
  return (
    <div className='select-box'>
      <div>
        <Select
          style={{ width: 154 }}
          onChange={(value) => {
            setCoin(value)
            dispatch(setNewList({ coin: value, list }))
          }
          }
          value={coin}
        >
          {options.map((option, index) => (
            <Option key={option} value={option}>
              {option}
            </Option>
          ))}
        </Select>
      </div>
      <div className='select-flex'>
        {
          optionsTab?.map(res => {
            return (
              <div key={res?.value} onClick={() => onTab(res)} className={`${indexVal === res?.value ? 'select-val' : ''} select-item`}>
                {res?.name}
              </div>
            )
          })
        }
      </div>
    </div>
  )
}
export default SelectDropdown